<template>
  <div class="app-container">
    <el-card>
      <el-table :data="paymentList">
        <el-table-column label="订单编号" align="center" prop="billInfoId" />
        <el-table-column label="月份" align="center" prop="billDate" />
        <!-- <el-table-column label="地点" align="center"   /> -->
        <el-table-column label="电量" align="center" prop="Usage" />
        <el-table-column label="电费" align="center" prop="payAmounts" />
        <!-- <el-table-column label="支付时间" align="center"  /> -->
        <el-table-column label="报告详情" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="jumpReportDetail(scope.row.billInfoId)">
              报告详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="支付状态" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.payMethod != '0'" type="success"
              @click="jumpBillsDetail(scope.row.billInfoId)">已支付</el-button>
            <el-button v-else type="danger" @click="jumpBillsDetail(scope.row.billInfoId)">未支付</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getBillList, getBillDetail } from "@/api/system/bill";
import { getUserProfile } from "@/api/system/user";

export default {
  name: "DayElecInfo",
  data() {
    return {
      showDayChart: true,
      showMonChart: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 每日用电情况表格数据
      list: [],
      dayElecInfoList: [],
      dayElec: [],
      //每月用电情况表格数据
      monthElecInfoList: [],
      monthElec: [],
      monthElecYear: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        eUsage: null,
        eTime: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      // 折线图
      myChart: {},
      monthChart: {},
      xData: [], //横坐标
      yData: [], //电量数据
      myChartStyle: { float: "left", width: "100%", height: "400px" },//图表样式
      monthChartStyle: { float: "left", width: "100%", height: "400px" },//图表样式
      //账单表格
      paymentList: [],
      month: [],
      // 账单状态
      ispaid: false,
      //用户id
      userId: null,
    };
  },
  mounted() {
    this.getList();
  },

  methods: {
    getList() {
      this.loading = true;
      // 获取用户ID
      getUserProfile().then(response => {
        if (this.$route.query.id) {
          console.log(this.$route.query);
          this.userId = this.$route.query.id;

        } else {
          this.userId = response.data.userId;
        }
        //获取订单列表
        getBillList(this.userId).then(response => {
          this.paymentList = response;
          console.log(response);
          /*
          getBillDetail(this.paymentList[0].billInfoId).then(response => {
            console.log(response)
            this.paymentList[0].Usage = response.delUsage;
            this.paymentList[0].payAmounts = response.payAmounts;
            this.paymentList[0].payMethod = response.payMethod;
          })*/
          this.paymentList.forEach(item => {
            console.log(item)
            const monthMatch = item.billDate.match(/^(\d{4}-\d{2})/); // 匹配'-'后跟随两个数字再跟随'-'的部分
            if (monthMatch) {
              item.Usage = item.delUsage;
              item.payAmounts = item.payAmounts;
              item.payMethod = item.payMethod;
              item.billDate = monthMatch[1]; // 获取匹配到的数字部分

            }
          })
        });
      });



    },
    // 跳转详情
    jumpBillsDetail: function (id) {
      const payId = id;
      this.$router.push({ path: "/system/billsDetail/ele-billsdetail/" + payId, query: { id: payId } });
    },
    // 跳转用电报告
    jumpReportDetail: function (id) {
      console.log("用电报告ID:" + id);
      this.$router.push("/system/reportDetail/ele-report/" + id);

    },
  }
};
</script>
